<template>
	<div class="my-edit-bottom">
		<n-space>
			<!-- 历史记录 -->
			<edit-history></edit-history>
			<!-- CTRL按键触发展示 -->
			<n-text id="keyboard-dress-show" depth="3" v-show="$store.chart.KeyboardActiveLabel">
				按下了「{{ $store.chart.KeyboardActiveLabel }}」键
			</n-text>
		</n-space>

		<n-space class="bottom-ri">
			<!-- 快捷键提示 -->
			<edit-shortcut-key />

			<!-- 缩放比例 -->
			<n-select
				ref="selectInstRef"
				class="scale-btn"
				v-model:value="filterValue"
				size="mini"
				:disabled="lockScale"
				:options="filterOptions"
				@update:value="selectHandle"
			/>

			<!-- 锁定缩放 -->
			<n-tooltip trigger="hover">
				<template #trigger>
					<n-button @click="lockHandle" text>
						<n-icon class="lock-icon" :class="{ color: lockScale }" size="18" :depth="2">
							<lock-closed-outline v-if="lockScale"></lock-closed-outline>
							<lock-open-outline v-else></lock-open-outline>
						</n-icon>
					</n-button>
				</template>
				<span>{{ lockScale ? '解锁' : '锁定' }}当前比例</span>
			</n-tooltip>

			<!-- 拖动 -->
			<n-slider
				class="scale-slider"
				v-model:value="sliderValue"
				:default-value="50"
				:min="10"
				:max="200"
				:step="5"
				:format-tooltip="sliderFormatTooltip"
				:disabled="lockScale"
				:marks="sliderMaks"
				@update:value="sliderHandle"
			/>
		</n-space>
	</div>
</template>

<script setup>
import { EditHistory } from '../EditHistory';
import { EditShortcutKey } from '../EditShortcutKey';

const { lockScale, scale } = toRefs($store.chart.editCanvas);

// 缩放选项
let filterOptions = [
		{
			label: '200%',
			value: 200
		},
		{
			label: '150%',
			value: 150
		},
		{
			label: '100%',
			value: 100
		},
		{
			label: '50%',
			value: 50
		},
		{
			label: '自适应',
			value: 0
		}
	],
	// 选择值
	filterValue = ref(0);

// 用户自选择
const selectInstRef = shallowRef(null);

function selectHandle(v) {
	selectInstRef.value?.blur();
	if (v === 0) return $store.chart.computedScale();
	$store.chart.setScale(v / 100);
}

// 点击锁处理
function lockHandle() {
	$store.chart.setEditCanvas('lockScale', !lockScale.value);
}

// 拖动
const sliderValue = ref(100);

// 拖动格式化
function sliderFormatTooltip(v) {
	return `${v}%`;
}

// 拖动处理
function sliderHandle(v) {
	$store.chart.setScale(v / 100);
}

const sliderMaks = reactive({ 100: '' });
// 监听 scale 变化
watchEffect(() => {
	const value = (scale.value * 100).toFixed(0);
	filterValue.value = `${value}%`;
	sliderValue.value = parseInt(value);
});
</script>

<style lang="scss" scoped>
$min-width: 500px;
$max-width: 670px;
@include b('edit-bottom') {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	height: 40px;
	padding: 0 10px;
	border-top: 1px solid var(--el-border-color);
	background-color: var(--color-bg-2);
	width: 100%;
	padding: 0 10px;
	.bottom-ri {
		position: relative;
		top: 15px;
		.lock-icon {
			padding-top: 4px;
			&.color {
				color: var(--el-color-primary);
			}
		}
		.scale-btn {
			width: 90px;
			font-size: 12px;
			:deep() {
				.n-base-selection-label {
					padding: 3px;
				}
			}
		}
		.scale-slider {
			position: relative;
			top: -4px;
			width: 100px;
		}
	}
}
</style>
